<template>
	<span>
		<el-upload :action="action" list-type="picture-card" :limit="limit" :id="id"
		:class="`el-upload-${size}`"
		ref="upload"
		:file-list="file_list"
		:on-change="handleChange"
		:auto-upload="autoUpload">
			<i slot="default" class="el-icon-plus"></i>
			<div slot="file" slot-scope="{file}" :uid="file.uid" v-dragging="{ item: file, list: file_list, group: 'file' }">
				<img class="el-upload-list__item-thumbnail" :src="file.url" onerror="https://www.dutall.com/static/img/default.gif" alt="">
				<span class="el-upload-list__item-actions">
					<span v-if="file.isImg" title="预览" @click="handlePictureCardPreview(file)">
						<i class="el-icon-zoom-in"></i>
					</span>
					<span v-if="!file.isImg" title="下载" @click="handleDownload(file)">
						<i class="el-icon-download"></i>
					</span>
					<span style="color:#F56C6C" title="删除" @click="handleRemove(file)">
						<i class="el-icon-delete"></i>
					</span>
					<span v-if="dragable" title="点击排序" @click="handleDrug()">
						<i class="el-icon-rank"></i>
					</span>
				</span>
			</div>
		</el-upload>

		<!-- 点击查看单个图片弹出框 -->
		<showImg ref="img"></showImg>

		<!-- 图片拖动弹出框 -->
		<el-dialog title="图片拖动排序" :visible.sync="dragDialogVisible">
			<span  v-for="file in file_list" v-dragging="{ item: file, list: file_list, group: 'file' }" :key="file.uid" style="margin-right:10px">
				<img  width="160" :src="file.url">
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dragDialogVisible = false">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- <div style="display:none" v-viewer="{movable: true}">
            <img width="200px"  id="xx" :src="viewImg" :key="viewImg">
        </div> -->

	</span>
</template>

<script type="text/javascript">
import Vue from 'vue'
import showImg from '@/dialog/img/showImg'
import VueDND from 'awe-dnd'
/*import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)*/
Vue.use(VueDND)
export default {
	name: 'xForm.elUpload',
	data(){
		return {
		    id:'_upload_com'+(Math.random()*1000000).toFixed(0),
			action:'#', //上传地址
			file_list:[], //经过数据转换的图片数据

			dragDialogVisible:false, //打开图片拖动弹出层

			//viewImg:'https://www.dutall.com/static/img/default.gif',
		}
	},
	props: {
		autoUpload:{type: Boolean, default: false}, //是否自动上传
		fileList:{type: Array, default: ()=>[]}, //文件预览 {url:'图片地址',new:'布尔值，新上传的标记为true，已存在的标记为false'}
		limit:{type:Number, default:1}, //限制上传数量
		dragable:{type: Boolean, default: false}, //是否可拖动图片排序
		viewer:{type: Boolean, default: false}, //是否v-viewer打开
		size: {
			type: String,
			default () {
				return 'normal'
			}
		}
	},
	components: { showImg },
	mounted(){
		this.file_list = this.fileList;
		this.handleFileList('url');
	},
	methods:{
		handleFileList(k){
			//处理图片数据
			this.file_list.forEach( (item, index) => {
				if(!item.url) return;
				//item.new = item.url.startsWith('blob:'); //标记为已存在图片
				if (/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG|BMP).*$/.test(item[k])) {
					item.isImg = true;
				} else {
					item.isImg = false;
					item.downloadUrl = item.url; //补充下载地址
					item.url = 'https://www.dutall.com/static/img/default.gif'; //修改url为图片地址
				}
			} )
		},
		handlePictureCardPreview(file) { //预览
			if(this.viewer){
				this.$refs.img.openViewer(file.url);
			} else {
				this.$refs.img.openByArgs({src:file.url,title:'图片预览'});
			}
			/*this.viewImg = file.url;
			document.getElementById("xx").click();*/
		},
		handleDownload(file) { //下载
			window.open(file.downloadUrl)
		},
		handleRemove(file) { //删除
			this.json.removeItemFromArr(this.file_list, 'uid', file.uid); //从file_list中删除文件
		},
		handleChange(file){ //选择文件
			this.file_list.push(file);
			this.handleFileList('name');
		},
		handleDrug(){ //开启拖动
			this.dragDialogVisible = true;
			this.$dragging.$on('dragged', ({ value }) => {
				/*console.log(value.item)
				console.log(value.list)*/
			})
		},
		submitUpload(){ //提交上传
			this.$refs.upload.submit();
		}
	},
	watch:{
		file_list(val, oldVal){
		    console.log()
			document.querySelector('#'+this.id+' .el-upload--picture-card').style.display = val.length==this.limit?'none':'';
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload-little {
	.el-upload--picture-card {
		width: 70px;
		height: 70px;
		line-height: 68px;
		.el-icon-plus {
			font-size: 16px;
		}
	}
	.el-upload-list--picture-card {
		.el-upload-list__item {
			width: 70px;
			height: 70px;
		}
	}
}
::v-deep .el-upload-middle {
	.el-upload--picture-card {
		width: 100px;
		height: 100px;
		line-height: 98px;
		.el-icon-plus {
			font-size: 20px;
		}
	}
	.el-upload-list--picture-card {
		.el-upload-list__item {
			width: 100px;
			height: 100px;
		}
	}
}
</style>
